<template>
  <div class="search-result-container">
    <!-- search -->
    <div class="search-block d-flex jc-between ai-center px-7 pt-7 bg-white">
      <a href="/pages/citySearch" class="city-block d-flex ai-center">
        <p class="fs-xl fwb">{{curLocation}}</p>
        <img src="/static/images/page/pull.png" class="pull-i">
      </a>
      <div class="input-block d-flex ai-center bg-light flex-1 px-6 pr-0">
        <img src="/static/images/page/search.png" class="search-i mr-3">
        <input type="text" placeholder="搜索目的地/点评" confirm-type="search" v-model.trim="model.search" :focus="inputFocus"
               @confirm="searchModelConfirm" class="w-100 h-100 flex-1 fs-lg">
        <div @tap="model.search = ''" class="clear-btn-wrap p-4">
          <img v-if="model.search" src="/static/images/page/search-clear.png" class="clear-btn">
        </div>
      </div>
    </div>
    <!-- result -->
    <div v-if="searchResultStatus" class="result-block px-7">
      <div v-if="serachEmpty" class="search-empty text-center position-center">
        <img src="/static/images/page/search-empty.png" class="empty-ban">
        <p class="tit fwb pt-5 pb-4">暂无搜索结果</p>
        <p class="fs-sm">快去首页上传此地信息<br />抢占沙发吧～</p>
      </div>
      <flow-data v-else />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import FlowData from '@/components/FlowData'
export default {
  components: { FlowData },
  data() {
    return {
      model: {
        search: ''
      },
      inputFocus: false,
      searchResultStatus: true,
      serachEmpty: false,
    }
  },
  computed: {
    ...mapGetters([
      'gpsLocation',
      'location',
    ]),
    curLocation() {
      return this.location || this.gpsLocation
    }
  },
  watch: {
    'model.search'() {
      this.serachEmpty = this.searchResultStatus = false
    }
  },
  mounted() {
    this.inputFocus = true
  },
  methods: {
    searchModelConfirm(e) {
      this.searchResultStatus = true
      if (true) {
        //   有结果
      } else {
        this.serachEmpty = true
      }
    }
  },

}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "@/styles/index.scss";
.search-result-container {
  .search-block {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 10;
    padding-bottom: 10rpx;
    .pull-i {
      @include wh(23rpx, 12rpx);
      margin-left: 10rpx;
      margin-right: 20rpx;
    }
    .input-block {
      height: 60rpx;
      border-radius: 30rpx;
      .search-i {
        @include wh(25rpx, 25rpx);
      }
      .clear-btn {
        @include wh(28rpx, 28rpx);
      }
    }
  }
  .result-block {
    position: relative;
    padding-top: 150rpx;
    .search-empty {
      .empty-ban {
        @include wh(180rpx, 130rpx);
        margin: 0 auto;
      }
      .tit {
        font-size: 36rpx;
      }
    }
    &::before {
      position: absolute;
      top: 120rpx;
      right: 30rpx;
      content: "";
      display: block;
      @include wh(610rpx, 1rpx);
      background: $green-border;
    }
  }
}
</style>